<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!--  DES:不能直接通过storeIndex这个对象处理，因为{{}}模板代码是依赖data运行的  -->
    <!--    <h3>Login UserInfo: {{storeIndex.state.userInfo}}</h3>-->
    <div v-if="isLogin">
      <h3>Login UserInfo: {{user_info}}</h3>
      <h5>{{user_name}}</h5>
      <h5>{{index}}</h5>
    </div>
  </div>
</template>

<script>
  // DES: 引入Vuex
  import storeIndex from '../store'

  export default {
    storeIndex,
    data () {
      return {
        isLogin: storeIndex.state.isLogin,
        user_info: storeIndex.state.userInfo,
        user_name: storeIndex.state.user_name,
        index: storeIndex.state.index
      }
    }
  }
</script>
